<script setup lang="ts">
// import type { CategoryItem } from '@/types/home'
import { ref } from 'vue'

const CategoryItem =ref([
  {
    id: '1',
    icon: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/201516e3-25d0-48f5-bcee-7f0cafb14176.png?quality=95&imageView',
    name: '我的车检',
    url: 'pages/mejian/mejian'
  },
  {
    id: '2',
    icon: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/cf82e5b4-bf1b-4c68-aa86-96f66e8e5282.png?quality=95&imageView',
    name: '二手车评估',
    url: 'pages/mejian/mejian'
  },
  {
    id: '1',
    icon: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/33e1f5de-0fdb-4cfa-9ba9-781233024b53.png?quality=95&imageView',
    name: '汽车资讯',
    url: 'pages/mejian/mejian'
  },
  {
    id: '1',
    icon: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/b514a526-4010-4ce8-8cb9-757ed382f84a.png?quality=95&imageView',
    name: '周边快修',
    url: 'pages/mejian/mejian'
  },
  {
    id: '1',
    icon: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/d38a73b8-cd03-48aa-a60b-e7c4e16667ed.png?quality=95&imageView',
    name: '使用帮助',
    url: 'pages/mejian/mejian'
  },
])
const list=ref()
function all(){
  list.value= CategoryItem.value
}
all()
// // 定义 props 接收数据
// defineProps<{
//   list: CategoryItem[]
// }>()
function url(url){
  uni.navigateTo({
    url:url
  })
}
</script>

<template>
  <view class="category">
    <navigator
      class="category-item"
      hover-class="none"
      url="pages/my/my"
      v-for="item in list"
      :key="item.id">
      <image class="icon" :src="item.icon" @click="url(item.url)"></image>
      <text class="text">{{ item.name }}</text>
    </navigator>
  </view>
</template>

<style lang="scss">
@import '../styles/category.scss';
</style>
